<template>
	<view class="main">
		<view class="main-top">
			<u-row gutter="0">
				<u-col span="6" class="welcome">
					<view class="welcome-name">{{userName}}</view>
					<view class="welcome-text">欢迎来到加能换电平台</view>
				</u-col>
				<u-col span="6" text-align="right">
					<u-avatar size='200' src="/static/img/a.png"></u-avatar>
				</u-col>
			</u-row>
			<view class='info-box'>
				<u-row gutter="0">
					<u-col span="3" text-align="center">
						<view>
							<span class="info-box-span-1">0</span>
							<span class="info-box-span-2">km</span>
						</view>
						<view>
							<span class="info-box-span-2">本月行驶</span>
						</view>
					</u-col>
					<u-col span="3" text-align="center">
						<view>
							<span class="info-box-span-1">0</span>
							<span class="info-box-span-2">kwh</span>
						</view>
						<view>
							<span class="info-box-span-2">平均能耗</span>
						</view>
					</u-col>
					<u-col span="3" text-align="center">
						<view>
							<span class="info-box-span-1">0</span>
							<span class="info-box-span-2">次</span>
						</view>
						<view>
							<span class="info-box-span-2">换电次数</span>
						</view>
					</u-col>
					<u-col span="3" text-align="center">
						<view>
							<span class="info-box-span-1">0</span>
							<span class="info-box-span-2">名</span>
						</view>
						<view>
							<span class="info-box-span-2">目前排名</span>
						</view>
					</u-col>
				</u-row>
			</view>

		</view>
		<view class="notice">
			<img src="../../static/img/index_icon_tip.png" alt="">驾车久了，请注意休息！
		</view>
		<view class="gift">
			<view class="gift-div-1">优惠活动</view>
			<view class="gift-div-2">充值满499元享受8折优惠活动</view>
		</view>
		<u-row gutter="0">
			<u-col span="6">
				<view class="jiaoyimingxi">
					<view class="jiaoyimingxi-div-1">交易明细</view>
					<view class="jiaoyimingxi-div-2">贴心记录每一笔流水</view>
				</view>
			</u-col>
			<u-col span="6">
				<view class="message" @click="toMessage">
					<view class="message-div-1">我的消息</view>
					<view class="message-div-2">暂无消息</view>
				</view>
				<view class="service">
					<view class="service-div-1">公共服务</view>
					<view class="service-div-2">公共服务</view>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {}
		},
		computed: mapState(['hasLogin', 'userName', 'token']),
		methods: {
			toMessage(){
				uni.navigateTo({
					url:'./message'
				})
			}
		},
		mounted() {
			
		},
		onLoad() {

		}
	}
</script>

<style>
	* {
		padding: 0;
		margin: 0;
	}

	.main {
		width: 100%;
		height: 500px;
	}

	.main-top {

		background-color: #3d9bfe;
		/* 不支持线性的时候显示 */
		background-image: linear-gradient(to bottom right, #3d9bfe, #0c66ea);
		/* background:url('../assets/img/index_bg1.png');
	 	background-size: 100% 100%; */
		padding: 40px 12px 0 12px;
	}

	.welcome {}


	.welcome-name {
		margin-top: 20px;
		color: #fff;
		font-size: 24px;
	}

	.welcome-text {
		color: #a7cafe;
		font-size: 13px;
	}

	.info-box {
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 16px 16px 0 0;
		margin-top: 20px;
		height: 75px;
		text-align: center;
		padding-top: 15.5px;
		box-sizing: border-box;
	}

	.info-box-span-1 {
		font-size: 15px;
		color: #36384d;
		margin-right: 3px;
	}

	.info-box-span-2 {
		font-size: 10px;
		color: #75778d;
	}

	.notice {
		height: 33px;
		background-color: #f0f5ff;
		line-height: 33px;
		padding: 0 12px 0 12px;
		color: #797a80;
		font-size: 11px;
	}

	.notice img {
		float: left;
		width: 17px;
		height: 14px;
		margin-top: 9px;
		margin-right: 6px;
	}

	.gift {
		background: url('../../static/img/gifts.png');
		background-size: 100% 100%;
		margin: 12px 12px 8px 12px;
		padding: 20px 0 20px 19px;
	}

	.gift-div-1 {
		font-size: 18px;
		color: #ff8533;
	}

	.gift-div-2 {
		font-size: 11px;
		color: #6a6a6a;
	}

	.jiaoyimingxi {
		background: url('../../static/img/jiaoyimingxi.png');
		background-size: 100% 100%;
		padding: 25px 0 100px 18px;
		margin-left: 12px;
		margin-right: 5px;
	}

	.jiaoyimingxi-div-1 {
		font-size: 15px;
		color: #ed5454;
	}

	.jiaoyimingxi-div-2 {
		font-size: 9px;
		color: #6a6a6a;
	}

	.message {
		background: url('../../static/img/message.png');
		background-size: 100% 100%;
		padding: 20px 0px 20px 14px;
		margin-left: 5px;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.message-div-1 {
		font-size: 14px;
		color: #4f7bf8;
	}

	.message-div-2 {
		font-size: 9px;
		color: #6a6a6a;
	}

	.service {
		background: url('../../static/img/service.png');
		background-size: 100% 100%;
		margin-left: 5px;
		margin-right: 10px;
		padding: 20px 0px 20px 14px;
	}

	.service-div-1 {
		font-size: 14px;
		color: #56c742;
	}

	.service-div-2 {
		font-size: 9px;
		color: #6a6a6a;
	}
</style>
